<template>
	<view class="wrap safe-area flex column align-center">
		<view class="wrap-white-bg">
			<block v-for="(item, index) in list" :key="index">
				<rowInput :item="item" v-model="dataInfo[item.key]"
					v-if="item.type === 'input' && item.direct === 'row'" />

				<columnInput :item="item" v-model="dataInfo[item.key]"
					v-else-if="item.type === 'input' && item.direct === 'column'" />

				<wrapUpload :item="item" v-model="dataInfo[item.key]"
					v-else-if="item.type === 'upload' && item.isShow" />

				<wrapFile :item="item" v-model="dataInfo[item.key]" v-else-if="item.type === 'file' && item.isShow" />

				<wrapVideo :item="item" v-model="dataInfo[item.key]" v-else-if="item.type === 'video' && item.isShow" />

				<wrapTextarea :item="item" v-model="dataInfo[item.key]" v-else-if="item.type === 'textarea'" />

				<rowGroup :item="item" v-model="dataInfo[item.key]"
					v-else-if="item.type === 'group' && item.direct === 'row'" />

				<columnGroup :item="item" v-model="dataInfo[item.key]"
					v-else-if="item.type === 'group' && item.direct === 'column'" />

				<wrapDistance :item="item" :area.sync="dataInfo.area" :lat.sync="dataInfo.lat" :lng.sync="dataInfo.lng"
					v-model="dataInfo[item.key]" v-else-if="item.type === 'distance' && item.isShow" />

				<areaList :item="item" v-model="dataInfo[item.key]" v-else-if="item.type === 'area' && item.isShow" />

				<wrapRecommend :item="item" v-model="dataInfo[item.key]" :shopID.sync="dataInfo.shop_id"
					:goodsID.sync="dataInfo.goods_id" v-else-if="item.type === 'recommend' && item.isShow" />
			</block>
		</view>

		<block v-if="beforeInfo === null">
			<view class="sure-btn theme-gradient-btn f-34" @click="onPublish">确认发布</view>
		</block>

		<block v-else>
			<view class="wrap-article-btn flex align-center just-between">
				<view class="delete-btn f-34 flex align-center just-center" @click="onDelete">
					<image class="delete-img" :src="$staticImagePath('article/delete.png')" />

					<view>删除</view>
				</view>

				<view class="save-btn theme-gradient-btn f-34" @click="onSave">保存</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		publishArticle,
		DelArticle,
		EditArticle
	} from "@/API/article.js";
	import rowInput from "@/components/form/rowInput.vue";
	import columnInput from "@/components/form/columnInput.vue";
	import wrapUpload from "@/components/form/upload.vue";
	import wrapVideo from "@/components/form/video.vue";
	import wrapFile from "@/components/form/videoFile.vue";
	import wrapTextarea from "@/components/form/textarea.vue";
	import rowGroup from "@/components/form/rowGroup.vue";
	import columnGroup from "@/components/form/columnGroup.vue";
	import wrapDistance from "@/components/form/distance.vue";
	import areaList from "@/components/form/areaList.vue";
	import wrapRecommend from "@/components/form/recommend.vue";
	export default {
		components: {
			rowInput,
			columnInput,
			wrapUpload,
			wrapTextarea,
			rowGroup,
			wrapFile,
			wrapVideo,
			columnGroup,
			wrapDistance,
			areaList,
			wrapRecommend,
		},
		props: {
			/**
			 * 文章分类ID
			 */
			articleCategoryID: {
				type: String,
				default: "",
			},
			/**
			 * 之前填写过的信息
			 */
			beforeInfo: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				dataInfo: {
					article_type: "1",
					type: "1",
					title: "", //标题
					content: "", //内容
					image: "", //封面图片
					video: "", //视频地址
					images: "", //图片
					release_type: "0", //发布位置
					range: "", //发布范围
					area: "", //发布区域
					spread_type: "", //推广类型
					lat: "",
					lng: "",
					goods_id: "", //商品ID
					shop_id: "", //店铺ID
					is_spread: "0",
				},
				isBefore: false,
				userInfo: null, //用户信息
			};
		},
		watch: {
			"dataInfo.release_type": {
				handler(newVal, oldVal) {
					if (oldVal !== undefined && (this.beforeInfo === null || this.isBefore)) {
						this.dataInfo.area = "";
						this.dataInfo.lat = "";
						this.dataInfo.lng = "";
					}
				},
				immediate: true,
			},
			beforeInfo: {
				handler() {
					if (this.beforeInfo !== null) {
						Object.keys(this.dataInfo).forEach(key => {
							if (key === "content") {
								this.dataInfo.content = this.beforeInfo.content_original;
							} else {
								this.dataInfo[key] = this.beforeInfo[key];
							}
						})
						setTimeout(() => {
							this.isBefore = true;
						}, 1000);
					}
				},
				immediate: true,
			}
		},
		computed: {
			list() {
				return [{
						title: "发布类型",
						require: true,
						type: "group",
						direct: "row",
						key: "article_type",
						tips: "请选择发布类型",
						list: [{
								id: "0",
								title: "图文"
							},
							{
								id: "1",
								title: "视频"
							},
						],
					},
					{
						title: "标题",
						require: true,
						type: "input",
						key: "title",
						place: "请输入标题",
						mode: "text",
						maxlength: 100,
						tips: "请输入标题",
						direct: "column",
					},
					{
						title: "编辑文案",
						require: true,
						type: "textarea",
						key: "content",
						place: "编辑文案~",
						mode: "text",
						maxlength: -1,
						tips: "请输入编辑文案",
					},
					{
						title: "图片",
						require: false,
						type: "upload",
						key: "images",
						tips: "请上传图片",
						isShow: this.dataInfo.article_type === "0",
					},
					// {
					// 	title: "上传封面图",
					// 	require: false,
					// 	type: "file",
					// 	key: "image",
					// 	tips: "请上传封面图",
					// 	isShow: this.dataInfo.article_type === "1",
					// },
					{
						title: "上传视频",
						require: true,
						type: "video",
						key: "video",
						tips: "请上传视频",
						isShow: this.dataInfo.article_type === "1",
					},
					{
						title: "选择发布位置",
						require: true,
						type: "group",
						direct: "column",
						key: "release_type",
						tips: "请选择发布位置",
						list: [{
								id: "0",
								title: "按距离"
							},
							{
								id: "1",
								title: "按区域（可多选区域）"
							},
						],
					},
					{
						title: "选择发布距离",
						require: true,
						type: "distance",
						key: "range",
						tips: "请选择发布距离",
						list: [{
								id: "1",
								title: "1km"
							},
							{
								id: "2",
								title: "3km"
							},
							{
								id: "3",
								title: "5km"
							},
							{
								id: "4",
								title: "10km"
							},
						],
						isShow: this.dataInfo.release_type === "0",
					},
					{
						title: "选择发布区域",
						require: true,
						type: "area",
						key: "area",
						tips: "请选择发布区域",
						isShow: this.dataInfo.release_type === "1",
					},
					{
						require: false,
						type: "recommend",
						key: "spread_type",
						tips: "请选择推广信息",
						isShow: this.beforeInfo === null ? (this.userInfo === null ? false : this.userInfo.code === 1) : false,
					},
				];
			},
		},
		mounted() {
			this.$commonNetwork.getUserIdenInfoData((res) => {
				this.userInfo = res;
			});
		},
		methods: {
			/**
			 * 删除
			 */
			onDelete() {
				var isShow = false;
				var title = "";
				if (this.beforeInfo.is_bonus == 1) {
					isShow = true;
					title = "您的文章正在推广中,确定强制删除吗?";
				}
				if (this.beforeInfo.will_top == 1) {
					isShow = true;
					title = "您的文章正在置顶中,确定强制删除吗?";
				}
				
				if (isShow === true) {
					uni.showModal({
						title: "提示",
						content: title,
						success: res => {
							if (res.confirm) {
								this.onDeleteData();
							}
						}
					})
				} else {
					this.onDeleteData();
				}
			},
			onDeleteData() {
				DelArticle(this.beforeInfo.id).then(res => {
					this.$st.success("删除成功", () => {
						uni.navigateBack();
					})
				})
			},
			/**
			 * 保存
			 */
			onSave() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					if (this.dataInfo.release_type === "0" && this.dataInfo.area === "") {
						this.$st.show("请选择发布位置的中心点");
						return;
					}
					let obj = this.dataInfo;
					obj.article_category_id = this.articleCategoryID;
					obj.article_id = this.beforeInfo.id;

					this.$throttle(() => {
						EditArticle(obj).then((res) => {
							this.$st.success("修改成功", () => {
								uni.$off("areaChoose");
								uni.$off("chooseRecommendItem");
								uni.navigateBack();
							});
						})
					})
				}
			},
			/**
			 * 确认发布
			 */
			onPublish() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					if (this.dataInfo.release_type === "0" && this.dataInfo.area === "") {
						this.$st.show("请选择发布位置的中心点");
						return;
					}

					if (this.dataInfo.spread_type === "0" && this.dataInfo.goods_id === "") {
						this.$st.show("请选择推广的商品");
						return;
					}
					if (this.dataInfo.spread_type === "2" && this.dataInfo.goods_id === "") {
						this.$st.show("请选择推广的套餐/卡券");
						return;
					}
					if (this.dataInfo.spread_type === "3" && this.dataInfo.goods_id === "") {
						this.$st.show("请选择自提商品");
						return;
					}
					if (this.dataInfo.spread_type === "4" && this.dataInfo.goods_id === "") {
						this.$st.show("请选择同城配送商品");
						return;
					}

					let obj = {
						...this.dataInfo
					};
					obj.article_category_id = this.articleCategoryID;

					this.$throttle(() => {
						publishArticle(obj)
							.then((res) => {
								this.$st.success("发布成功", () => {
									uni.$off("areaChoose");
									uni.$off("chooseRecommendItem");
									this.$jump.paySuccess("article");
								});
							})
					})
				}
			},
		},
	};
</script>

<style>
	@import "@/css/publish.css";
</style>